<template>
    <div>
        <div class="bai">
            <div ref="chart" id="d1">
              <div id="containerto" style="height: 100%"></div>
            </div>
            <div id="d3"> 
              <div id="containeron" style="height: 100%"></div>
            </div>

            <div id="d2">
              <div id="container" style="height: 100%"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                data: [],
            }
        },

           
          

mounted(){
var dom = document.getElementById('containerto');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  title: {
    text: '医院挂号总量',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 42, name: '解放军总医院' },
        { value: 23, name: '北京大学第三医院' },
        { value: 37, name: '北京大学第六医院' },
        { value: 20, name: '解放军第309医院' },
        { value: 24, name: '解放军总医院第一附属医院' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);




   var dom = document.getElementById('containeron');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

  option = {
  legend: {},
  tooltip: {},
  dataset: {
    source: [
      ['状态', '未就诊', '就诊'],
      ['星期一', 10, 57],
      ['星期二', 22, 33],
      ['星期三', 15, 43],
      ['星期四', 12, 67],
      ['星期五', 6, 44],
      ['星期六', 24, 120],
      ['星期日', 33, 103]
      
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: 'bar' }, { type: 'bar' }]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);




    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    var option;
    option = {
  title: {
    text: '                     近两周挂号'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['北京大学第三医院', '解放军总医院', '北京大学第六医院', '北京大学口腔医院', '北京大学肿瘤医院', '中医科学院西苑医院', '北京世纪坛医院','武警总医院','海军总医院','空军特色医学中心','解放军总医院第一附属医院','解放军第309医院']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
    }
  },
  series: [
    {
      name: '上周',
      type: 'line',
      data: [23, 42, 37, 26, 14, 42, 43,28,36,40,52,24,20],
    },
    {
      name: '上上周',
      type: 'line',
      data: [30, 40, 23, 30, 34, 50, 34,42,24,33,23,17],
      markLine: {
        data: [
 
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',

            }
          ]
        ]
      }
    }
  ]
};
    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
},

        methods:{
           
        }
    }
</script>

<style lang="scss" scoped>
.bai{
  background-color: #fff;
  height: calc(100vh - 120px);
  position: relative;
   border-radius: 7px;
  box-shadow:0px 0px 10px #ccc;
    overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  
  #d1{
    padding: 20px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 49%;
    
  }
  #d2{
    position: absolute;

    padding: 20px;
    bottom: 0px;
    width: 100%;
    height: 49%;
  }
  #d3{
    padding: 20px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50%;
    height: 49%;
  }


  }
</style>